<template>
    <div>
        <span
            v-for="index in 5"
            :key="index"
            :style="{
                fontSize: size + 'px'
            }"
            :class="['iconfont',
                index <= modelValue ? 'icon-star-on active': 'icon-star-off'
            ]"
            @click="handleSetStarsNum(index)"
        ></span>
    </div>
</template>

<script>

import { useStars } from '../hooks';

export default {
    name: 'MgStars',
    props: {
        modelValue: {
            type: Number,
            default: 0
        },
        size: {
            type: Number,
            default: 16
        }
    },
    emits: ['update:modelValue', 'change'],
    setup(props, context) {

        return useStars(props, context);
    }
}
</script>

<style lang="scss" scoped>
    @font-face {
        font-family: "iconfont"; /* Project id 2951430 */
        src: url('//at.alicdn.com/t/font_2951430_mmysk6d9mi9.woff2?t=1637314974095') format('woff2'),
            url('//at.alicdn.com/t/font_2951430_mmysk6d9mi9.woff?t=1637314974095') format('woff'),
            url('//at.alicdn.com/t/font_2951430_mmysk6d9mi9.ttf?t=1637314974095') format('truetype');
    }

    .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: rgb(198, 209, 222);
        &.active {
            color: #f7ba2a;
        }
        &.icon-star-off, &.icon-star-on {
            transition: color .3s;
        }
        &.icon-star-off:before {
            content: "\e7df";
        }
        &.icon-star-on:before {
            content: "\e86a";
        }
    }
</style>
